<template>
    <div>
        <p class="list">
            <!-- <a v-for="(item,idx) in menuData" :key="idx"
            @click="toDetail(item.id)"
            >{{item.name}}</a> -->

            <a v-for="(item,idx) in menuData" :key="idx"
            @click=" $router.push('/detail/' + item.id + '/haha/world') "
            >{{item.name}}</a>
        </p>
    </div>
</template>

<script>
export default {
    name: "Twomenu",
    props: ["menuData"],
    updated() {
      console.log(this.menuData);
    },
    methods: {
      toDetail(id){
        // 不通过router-link组件，在js中跳转路由

        // push会在当前路由记录上增加一条新记录，可以通过后退返回上一个路由
        // this.$router.push("/detail/" + id);
        // this.$router.push({
        //   name: "detail",
        //   params: {
        //     id: id,
        //     abc: "hAhA",
        //     qwe: "world"
        //   }
        // });
        // this.$router.push("/detail?id=" + id);

        // replace会替换当前路由记录，不可以通过后退返回上一个路由
        // this.$router.replace("/detail/" + id);
        // this.$router.replace({
        //   name: "detail",
        //   params: {
        //     id: id
        //   }
        // });
      }
    },
}
</script>

<style lang="less">
.list{
  margin: 0;
  padding: 0;
  list-style: none;
  display:flex;
  flex-wrap: wrap;
  a{
    cursor: pointer;
    padding:4px;
    margin:4px;
    border-radius:4px;
    background:#f6f6f6;
    &:hover{
      background:#e6e6e6;
    }
    &:active{
      background:#d6d6d6;
    }
  }
}
</style>